<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>主页</title>
    <style>
        .nav {
            display: flex;
            justify-content: space-around;
            padding: 20px;
            background-color: #f8f8f8;
            border-bottom: 1px solid #ddd;
            position: fixed;
            top: 0;
            width: 100%;
            z-index: 1000;
        }
        .nav a {
            text-decoration: none;
            color: #333;
            font-weight: bold;
        }
        .nav a:hover {
            text-decoration: underline;
        }
        body {
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            margin: 0;
            padding: 0;
            height: 100%;
            background-color: black;
            position: relative;
        }
        .container.welcome-text {
            text-align: center;
            padding: 50px;
            color: #fff;
            min-height: calc(100vh - 71px);
            overflow: hidden;
            position: relative;
            top: 201px;
        }
        .container.welcome-text h1, .container.welcome-text p {
            margin: 20px 0;
        }
        h1 {
            font-size: 2em;
        }
        p {
            font-size: 1.2em;
            line-height: 1.6;
        }
        .star {
            position: absolute;
            width: 0;
            height: 0;
            opacity: 0.2;
            border: 2px solid transparent;
            border-bottom: 4px solid #fff;
            animation: flash 2s infinite linear;
        }
        .star::before {
            content: "";
            position: absolute;
            left: -2px;
            top: 4px;
            border: 2px solid transparent;
            border-top: 4px solid #fff;
        }
        @keyframes flash {
            0%, 100% { opacity: 0.2; }
            50% { opacity: 1; }
        }
        .image-container {
            position: fixed; /* 绝对定位 */
            right: 180px; /* 距离右边距10px */
            bottom: 120px; /* 距离下边距10px */
            width: 200px; /* 图片容器的宽度 */
            height: 200px; /* 图片容器的高度 */
        }
        .image-container img {
            width: 100%; /* 使图片填满容器 */
            height: auto; /* 高度自适应保持图片比例 */
        }
        .card {
  position: fixed;
  /* 调整 left 和 top 属性以使其位于中间 */
  left: 85%;
  top: 45%;
  /* 使用 transform 属性来居中元素 */
  transform: translate(-50%, -50%);
  /* 调整 right 属性以使其靠右 */
  right: 20px; /* 根据需要调整这个值 */
  width: 280px;
  height: 150px;
  background: linear-gradient(to right, rgb(20, 30, 48), rgb(36, 59, 85));
  border-radius: 15px;
  box-shadow: rgb(0,0,0,0.7) 5px 10px 50px, rgb(0,0,0,0.7) -5px 0px 250px;
  display: flex;
  color: white;
  justify-content: center;
  flex-direction: column;
  cursor: pointer;
  transition: all 0.3s ease-in-out;
  overflow: hidden;
}


.card:hover {
  box-shadow: rgb(0,0,0) 5px 10px 50px ,rgb(0,0,0) -5px 0px 250px;
}

.time-text {
  font-size: 50px;
  margin-top: 0px;
  margin-left: 15px;
  font-weight: 600;
  font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
}

.time-sub-text {
  font-size: 15px;
  margin-left: 5px;
}

.day-text {
  font-size: 18px;
  margin-top: 0px;
  margin-left: 15px;
  font-weight: 500;
  font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
}

.moon {
  font-size: 20px;
  position: absolute;
  right: 15px;
  top: 15px;
  transition: all 0.3s ease-in-out;
}

.card:hover > .moon {
  font-size: 23px;
}

    </style>
</head>
<body>
    <div class="nav">
        <a href="appointment_booking">服务预约</a>
        <a href="health_status">健康状况</a>
        <a href="my_profile">我的</a>
    </div>
    <div class="container welcome-text">
        <h1>欢迎来到xx养老院管理系统</h1>
        <p>在这里，您可以预约服务和查看健康状况。</p>
    </div>
    <div class="card">
<p class="time-text"><span>15:20</span><span class="time-sub-text">PM</span></p>
<p class="day-text">Wednesday, May 15th</p>
<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 16 16" stroke-width="0" fill="currentColor" stroke="currentColor" class="moon"><path d="M6 .278a.768.768 0 0 1 .08.858 7.208 7.208 0 0 0-.878 3.46c0 4.021 3.278 7.277 7.318 7.277.527 0 1.04-.055 1.533-.16a.787.787 0 0 1 .81.316.733.733 0 0 1-.031.893A8.349 8.349 0 0 1 8.344 16C3.734 16 0 12.286 0 7.71 0 4.266 2.114 1.312 5.124.06A.752.752 0 0 1 6 .278z"></path><path d="M10.794 3.148a.217.217 0 0 1 .412 0l.387 1.162c.173.518.579.924 1.097 1.097l1.162.387a.217.217 0 0 1 0 .412l-1.162.387a1.734 1.734 0 0 0-1.097 1.097l-.387 1.162a.217.217 0 0 1-.412 0l-.387-1.162A1.734 1.734 0 0 0 9.31 6.593l-1.162-.387a.217.217 0 0 1 0-.412l1.162-.387a1.734 1.734 0 0 0 1.097-1.097l.387-1.162zM13.863.099a.145.145 0 0 1 .274 0l.258.774c.115.346.386.617.732.732l.774.258a.145.145 0 0 1 0 .274l-.774.258a1.156 1.156 0 0 0-.732.732l-.258.774a.145.145 0 0 1-.274 0l-.258-.774a1.156 1.156 0 0 0-.732-.732l-.774-.258a.145.145 0 0 1 0-.274l.774-.258c.346-.115.617-.386.732-.732L13.863.1z"></path></svg>
</div>
     <div class="image-container">
        <img src="../static/1.png">
    </div>
    <canvas id="Meteor" style="position: absolute; top: 0; left: 0;"></canvas>

    <script type="text/javascript">
      var starCount = 300;
      var context;
      function starInit() {
        var bg = document.querySelector("body");
        for (var i = 0; i < starCount; i++) {
          var star = document.createElement("div");
          star.classList.add("star");
          bg.appendChild(star);
        }
      }
      function starPosition() {
        var stars = document.querySelectorAll(".star");
        for (var i = 0; i < starCount; i++) {
          stars[i].style.left = Math.random() * window.innerWidth + "px";
          stars[i].style.top = Math.random() * window.innerHeight + "px";
          stars[i].style.animationDelay = Math.random() * 10 + "s";
        }
      }

      function init() {
        var Meteor = document.getElementById("Meteor");
        Meteor.width = window.innerWidth;
        Meteor.height = window.innerHeight;
        context = Meteor.getContext("2d");
      }

      function MeteorRain() {
        this.x = Math.random() * window.innerWidth;
        this.y = Math.random() * window.innerHeight;
        this.length = Math.ceil(Math.random() * 80 + 150);
        this.angle = 30;
        this.cos = Math.cos(this.angle * Math.PI / 180);
        this.sin = Math.sin(this.angle * Math.PI / 180);
        this.width = this.length * this.cos;
        this.height = this.length * this.sin;
        this.speed = Math.ceil(Math.random() + 0.5);
        this.shifting_x = this.speed * this.cos;
        this.shifting_y = this.speed * this.sin;
        this.alpha = 1;

        this.countPos = function () {
          this.x = this.x - this.shifting_x;
          this.y = this.y + this.shifting_y;
        };
        this.draw = function () {
          context.save();
          context.beginPath();
          context.lineWidth = 1;
          context.globalAlpha = this.alpha;
          var line = context.createLinearGradient(this.x, this.y, this.x + this.width, this.y - this.height);
          line.addColorStop(0, "white");
          line.addColorStop(0.5, "grey");
          line.addColorStop(1.0, "black");
          context.strokeStyle = line;
          context.moveTo(this.x, this.y);
          context.lineTo(this.x + this.width, this.y - this.height);
          context.stroke();
          context.restore();
        };
        this.move = function () {
          this.countPos();
          if (this.y > window.innerHeight || this.x < 0) {
            this.x = Math.random() * window.innerWidth;
            this.y = -this.height;
          }
          this.alpha = 1;  // Reset alpha whenever rain moves out of view
          this.draw();
        };
      }
      function playRains() {
        context.clearRect(0, 0, window.innerWidth, window.innerHeight);
        for (var n = 0; n < rainCount; n++) {
          var rain = rains[n];
          rain.move();
        }
        requestAnimationFrame(playRains);
      }
      var rainCount = 20;
      var rains = [];
      window.onload = function() {
        init();
        starInit();
        starPosition();
        for (var i = 0; i < rainCount; i++) {
          var rain = new MeteorRain();
          rains.push(rain);
        }
        playRains();
      };
    </script>
</body>
</html>